<template>
  <ul class="room-footer">
    <li class="relative" v-for="item in state.menus" :key="item.name" @click="handleJump(item)">
      <div>
        <img class="w-[40px] h-[40px]" :src="item.icon" />
      </div>
      <div class="text-[#fff] mt-[1px]">{{ item.name }}</div>
      <span
        class="w-[8px] h-[8px] rounded-full bg-[red] absolute top-[5px] right-0"
        v-if="item.name === '最近聊天' && status"
      ></span>
      <span
        class="w-[8px] h-[8px] rounded-full bg-[red] absolute top-[5px] right-0"
        v-if="item.name === '管理中心' && (applyCount || joinCount)"
      ></span>
    </li>
  </ul>
</template>

<script setup lang="ts">
import chatImg from "@/assets/images/main/icon-chat.png";
import dataImg from "@/assets/images/main/icon-data.png";
import roomImg from "@/assets/images/main/icon-room.png";
import manageImg from "@/assets/images/main/icon-manage.png";
import { usePremsStore } from "@/store/modules/prems";
import { toast } from "@/utils/toast";
import { useServiceStore } from "@/store/modules/service";
import { storeToRefs } from "pinia";
import { useRoomStore } from "@/store/modules/room";

interface Menu {
  name: string;
  icon: string;
  path: string;
  show: boolean;
}

const router = useRouter();
const premsStore = usePremsStore();
const roomStore = useRoomStore();
const serviceStore = useServiceStore();
const { applyCount, joinCount } = storeToRefs(roomStore);
const { status } = storeToRefs(serviceStore);
const state = reactive({
  menus: <Menu[]>[
    {
      name: "最近聊天",
      icon: chatImg,
      path: "/admin/main/chat",
      show: premsStore.isEditChatSetting
    },
    {
      name: "游戏数据",
      icon: dataImg,
      path: "/admin/main/data",
      show: true
    },
    {
      name: "房间设置",
      icon: roomImg,
      path: "/admin/main/setting",
      show: premsStore.isMenuSetting
    },
    {
      name: "管理中心",
      icon: manageImg,
      path: "/admin/main/manage",
      show: true
    }
  ]
});

const handleJump = (item: Menu) => {
  if (item.show) {
    router.push(item.path);
  } else {
    toast.info("暂无权限");
  }
};
</script>
<style scoped>
.room-footer {
  @apply flex justify-around mb-[20px] text-[14px];
}
.room-footer li {
  @apply flex justify-center items-center flex-col;
}
</style>
